@import './colors';
@import './fonts';
@import './mixins';
@import './media-queries';

label {
  @include font-size(14px);

  color: $gray-4;
  font-family: $inter;
  font-weight: bold;
  text-transform: uppercase;
}

.value {
  @include font-size(14px);

  display: flex;
  align-items: center;
  min-height: 40px;
  margin: 0px;
  padding: 0px 20px;
  border: 1px solid $gray-3;
  border-radius: 6px;
  outline: none;
  color: $gray-5;
  font-family: $inter;
  word-break: break-all;
}

label + input,
label + .value {
  margin-left: 20px;
}

input {
  @include font-size(14px);

  height: 40px;
  margin: 0px;
  padding: 0px 20px;
  border: 1px solid $gray-3;
  border-radius: 6px;
  outline: none;
  color: $gray-5;
  font-family: $inter;

  &:focus {
    box-shadow: 0 0 3px 0 $light-green;
  }

  // sass-lint:disable no-vendor-prefixes
  &:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 $gray-5;
  }

  &.input-plus {
    position: relative;
    border-radius: 0px 6px 6px 0px;

    &:focus {
      z-index: 1;
    }
  }
}

select {
  @include font-size(14px);
  height: 40px;
  margin: 0;
  padding: 5px 10px;
  border: 1px solid $gray-3;
  border-radius: 6px;
  outline: none;
  color: $gray-5;
  font-family: $inter;
  &:focus {
    box-shadow: 0 0 3px 0 $light-green;
  }
}
